<template>
	<div>
		<div class="head">
			<a @click="$router.push({path: '/'})" class="return"></a>
      {{$t('DepositMmoney.v1')}}
			<a class="operating" @click="$router.push({path:'record'})">
				<van-icon name="orders-o" size="25" />
			</a>
		</div>
		<div class="overlay">
			<div class="depositwrap">
				<van-row>
					<van-col span="24" class="title">
					<span>{{$t('DepositMmoney.v2')}}</span>
					<span>{{$t('DepositMmoney.v3')}}</span>
					</van-col>
				</van-row>
				<div class="selectedWrap" @click="listCreat()">
					<p>{{$t('DepositMmoney.v4')}}&nbsp;&nbsp;&nbsp;&nbsp;{{$t('DepositMmoney.v5')}}{{dataTime}}{{$t('DepositMmoney.v6')}}</p>
					<!-- <p>5.2545%</p>
					<p>七日年化率</p> -->
					<div class="btn">{{$t('DepositMmoney.v7')}}</div>
				</div>
			</div>
			<div class="depositwraps">
				<p class="tit">{{$t('DepositMmoney.v8')}}</p>
				<p class="title">{{$t('DepositMmoney.v9')}}</p>
				<ul class="depositwrapsUl cf">
					<li v-for="(item,index) in lists" :key="index" @click="listC(item)">
					<p>{{$t('DepositMmoney.v10')}}{{item}}{{$t('DepositMmoney.v6')}}</p>
					<!-- <p>4.57982%</p>
					<p>七日年化</p> -->
					<p class="four">
						<span>{{$t('DepositMmoney.v11')}}></span>
					</p>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
import { coinMmoney } from './../utils/api';
let _this;
export default {
  data() {
    return {
      lists:[
        // 180,120,110,18
      ],
      dataTime:''
    };
  },
  mounted() {
    this.depositwrap()
  },
  methods: {
    depositwrap(){
      coinMmoney.depositwrap().then(res => {
        this.lists = res.data.sort(function(a,b){
          return a-b
        });
        this.dataTime = this.lists[0]
    	})
    },
    listC(item){
      this.$router.push({path:'DepositDetails',query:{times:item}})
    },
    listCreat(){
      this.$router.push({path:'DepositDetails',query:{times:this.dataTime}})
    }
  }
};
</script>

<style lang="less" scoped>
.cf {
  zoom: 1;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.pr {
  position: relative;
}
.cf:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
.head{background:#fff;color:#333}
.head .return:after{border-color:#333}
.head .operating /deep/ i{vertical-align:middle}
.operating{color:#333}
.overlay{background:#F5F5F5;overflow-y:scroll;}
.depositwrap {
  padding: 15px 20px 10px;
  color: #333;
  font-size: 15px;
  .title span:nth-of-type(2) {
    font-size: 12px;
    color: #999;
    margin-left: 10px;
  }
  .selectedWrap {
    background: #fff;
    text-align: center;
    margin-top: 10px;
    padding: 20px 0;
    border-radius: 10px;
    box-shadow: 0 0 12px #c5c4c4;
    p:nth-child(1) {
      font-size: 20px;
      font-weight: 700;
    }
    p:nth-child(2) {
      font-weight: 700;
      font-size: 19px;
      color: #f01d1d;
      margin: 18px 0 8px;
    }
    p:nth-child(3) {
      font-size: 14px;
      color: #999;
    }
    .btn {
      width: 80%;
      background: #3fb776;
      height: 30px;
      line-height: 30px;
      margin: 0 auto;
      color: #fff;
      margin-top: 15px;
      border-radius: 4px;
      font-size: 13px;
    }
  }
}
.depositwraps {
  margin: 10px 20px;
  color: #333;
  padding: 15px 0;
  font-size: 15px;
  background: #fff;
  box-shadow: 0 0 12px #c5c4c4;
  border-radius: 10px;
  .tit {
    padding: 0 15px;
  }
  .title {
    font-size: 12px;
    color: #999;
    padding: 0 15px;
  }
  .depositwrapsUl {
    overflow: hidden;
    margin-top: 10px;
    li {
      width: 50%;
      float: left;
      color: #333;
      font-size: 13px;
      padding: 30px 0;
      border-bottom: 1px solid #ededed;
      &:nth-child(2n + 1) {
        width: calc(50% - 1px);
        border-right: 1px solid #ededed;
      }
      p {
        text-align: center;
        &:nth-child(1) {
          font-weight: 700;
        }
        &:nth-child(2) {
          font-weight: 700;
          font-size: 18px;
          color: #f13636;
          margin: 8px 0;
        }
        &:nth-child(3) {
          font-size: 12px;
          color: #999;
        }
        &.four {
          font-size: 12px;
          span {
            color: #fff;
            display: inline-block;
            background: #3fb776;
            width: 80px;
            height: 26px;
            line-height: 26px;
            border-radius: 13px;
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>
